<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '地图标注',
  },
}
</route>
<template>
  <view class="min-h-screen bg-gray-50">
    <!-- Hero Section -->
    <view class="bg-gradient-to-br from-blue-50 to-blue-100 p-6">
      <image
        :src="'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250218214236-6I5nJ2SrTyowm2IeOvMG7IAbr4AoHn.png'"
        alt="Map illustration"
        class="w-full max-w-md mx-auto"
      />
      <view class="text-gray-600 text-sm mt-4 text-center">
        地图标注帮助于实体企业快速发展转型，提高门店线上业绩。
      </view>
    </view>

    <!-- Form -->
    <view class="p-4">
      <form @submit.prevent="handleSubmit" class="space-y-6">
        <!-- Name -->
        <view class="mt-6">
          <view class="block mb-2">
            <text class="text-red-500">*</text>
            标注名称
          </view>
          <input
            v-model="form.name"
            type="text"
            placeholder="填写门头招牌名称"
            class="p-3 rounded-lg bg-gray-100 border-0 focus:ring-2 focus:ring-blue-500"
          />
        </view>

        <!-- Business Type -->
        <view class="mt-6">
          <view class="block mb-2">
            <text class="text-red-500">*</text>
            经营类型
          </view>
          <select
            v-model="form.businessType"
            class="w-full p-3 rounded-lg bg-gray-100 border-0 focus:ring-2 focus:ring-blue-500 appearance-none"
          >
            <option value="" disabled>请选择经营类型</option>
            <option v-for="type in businessTypes" :key="type" :value="type">
              {{ type }}
            </option>
          </select>
        </view>

        <!-- Phone -->
        <view class="mt-6">
          <view class="block mb-2">
            <text class="text-red-500">*</text>
            营业电话
          </view>
          <input
            v-model="form.phone"
            type="tel"
            placeholder="填写手机或固话（固话需带区号）"
            class="p-3 rounded-lg bg-gray-100 border-0 focus:ring-2 focus:ring-blue-500"
          />
        </view>

        <!-- Business Hours -->
        <view class="mt-6">
          <view class="block mb-2">
            <text class="text-red-500">*</text>
            营业时间
          </view>
          <input
            v-model="form.hours"
            type="text"
            placeholder="填写营业时间（08:00-18:00）"
            class="p-3 rounded-lg bg-gray-100 border-0 focus:ring-2 focus:ring-blue-500"
          />
        </view>

        <!-- Address -->
        <view class="mt-6">
          <view class="block mb-2">
            <text class="text-red-500">*</text>
            详细地址介绍
          </view>
          <textarea
            v-model="form.address"
            placeholder="请填写详细地址"
            rows="3"
            style="width: 640rpx"
            class="p-3 rounded-lg bg-gray-100 border-0 focus:ring-2 focus:ring-blue-500 resize-none"
          ></textarea>
        </view>

        <view class="mt-6">
          <view class="block mb-2">
            <text class="text-red-500">*</text>
            上传营业执照
          </view>

          <!-- 上传 -->
        </view>

        <view class="mt-6">
          <view class="block mb-2">
            <text class="text-red-500">*</text>
            上传法人身份证
          </view>

          <!-- 上传 -->
        </view>

        <view class="mt-6">
          <view class="block mb-2">
            <text class="text-red-500">*</text>
            上传门头招牌
          </view>

          <!-- 上传 -->
        </view>

        <view class="mt-6">
          <view class="block mb-2">
            <text class="text-red-500">*</text>
            联系电话
          </view>

          <!-- 上传 -->
          <input
            v-model="form.hours"
            type="text"
            placeholder="提交资料人联系电话"
            class="p-3 rounded-lg bg-gray-100 border-0 focus:ring-2 focus:ring-blue-500"
          />
        </view>

        <view class="mt-6">
          <wd-button type="primary" block>提交资料</wd-button>
        </view>
      </form>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

const form = reactive({
  name: '',
  businessType: '',
  phone: '',
  hours: '',
  address: '',
})

const businessTypes = [
  '餐饮美食',
  '购物超市',
  '生活服务',
  '休闲娱乐',
  '酒店住宿',
  '医疗保健',
  '教育培训',
  '其他',
]

const handleSubmit = () => {
  console.log('Form submitted:', form)
}
</script>

<style scoped>
/* 确保底部导航不会遮挡内容 */
.min-h-screen {
  padding-bottom: 60px;
}
/* 自定义下拉箭头样式 */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;
}
</style>
